﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="profile" href="http://gmpg.org/xfn/11">
	<link rel="pingback" href="http://jspang.com/xmlrpc.php">

<title>React免费视频教程-表单的应用 &#8211; 技术胖-胜洪宇关注web前端技术</title>
<link rel='dns-prefetch' href='//fonts.googleapis.com' />
<link rel='dns-prefetch' href='//s.w.org' />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; Feed" href="http://jspang.com/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; 评论Feed" href="http://jspang.com/comments/feed/" />
<link rel="alternate" type="application/rss+xml" title="技术胖-胜洪宇关注web前端技术 &raquo; React免费视频教程-表单的应用评论Feed" href="http://jspang.com/2017/09/07/react002/feed/" />
		<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/2.3\/svg\/","svgExt":".svg","source":{"concatemoji":"http:\/\/jspang.com\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.8.2"}};
			!function(a,b,c){function d(a){var b,c,d,e,f=String.fromCharCode;if(!k||!k.fillText)return!1;switch(k.clearRect(0,0,j.width,j.height),k.textBaseline="top",k.font="600 32px Arial",a){case"flag":return k.fillText(f(55356,56826,55356,56819),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,56826,8203,55356,56819),0,0),c=j.toDataURL(),b!==c&&(k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,56128,56423,56128,56418,56128,56421,56128,56430,56128,56423,56128,56447),0,0),b=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55356,57332,8203,56128,56423,8203,56128,56418,8203,56128,56421,8203,56128,56430,8203,56128,56423,8203,56128,56447),0,0),c=j.toDataURL(),b!==c);case"emoji4":return k.fillText(f(55358,56794,8205,9794,65039),0,0),d=j.toDataURL(),k.clearRect(0,0,j.width,j.height),k.fillText(f(55358,56794,8203,9794,65039),0,0),e=j.toDataURL(),d!==e}return!1}function e(a){var c=b.createElement("script");c.src=a,c.defer=c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g,h,i,j=b.createElement("canvas"),k=j.getContext&&j.getContext("2d");for(i=Array("flag","emoji4"),c.supports={everything:!0,everythingExceptFlag:!0},h=0;h<i.length;h++)c.supports[i[h]]=d(i[h]),c.supports.everything=c.supports.everything&&c.supports[i[h]],"flag"!==i[h]&&(c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&c.supports[i[h]]);c.supports.everythingExceptFlag=c.supports.everythingExceptFlag&&!c.supports.flag,c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.everything||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
		<style type="text/css">
img.wp-smiley,
img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='crayon-css'  href='style/css/crayon.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-theme-github-css'  href='style/css/github.css' type='text/css' media='all' />
<link rel='stylesheet' id='crayon-font-droid-sans-mono-css'  href='style/css/droid-sans-mono.css' type='text/css' media='all' />
<link rel='stylesheet' id='smartideo_css-css'  href='style/css/smartideo.css' type='text/css' media='screen' />
<link rel='stylesheet' id='toc-screen-css'  href='style/css/screen.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r-font-awesome-front-css'  href='style/css/font-awesome.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_bootstrap-front-css'  href='style/css/bootstrap-front.css' type='text/css' media='all' />
<link rel='stylesheet' id='wpsm_tabs_r_animate-css'  href='style/css/animate.css' type='text/css' media='all' />
<link rel='stylesheet' id='bootstrap-css'  href='style/css/bootstrap.min.css' type='text/css' media='all' />
<link rel='stylesheet' id='font-awesome-css'  href='style/css/font-awesome01.min' type='text/css' media='all' />
<link rel='stylesheet' id='slicknav-css'  href='style/css/slicknav.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-stylesheet-css'  href='style/css/style.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-responsive-css'  href='style/css/responsive.css' type='text/css' media='all' />
<link rel='stylesheet' id='aster-google-fonts-css'  href='https://fonts.googleapis.com/css?family=Open+Sans%3A400%2C300%2C300italic%2C400italic%2C600%2C600italic%2C700%2C700italic&#038;subset=latin%2Clatin-ext' type='text/css' media='all' />
<link rel='stylesheet' id='xhshop_css-css'  href='style/css/api-form.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/jquery.js'></script>
<script type='text/javascript' src='style/js/jquery-migrate.min.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var CrayonSyntaxSettings = {"version":"_2.7.2_beta","is_admin":"0","ajaxurl":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","prefix":"crayon-","setting":"crayon-setting","selected":"crayon-setting-selected","changed":"crayon-setting-changed","special":"crayon-setting-special","orig_value":"data-orig-value","debug":""};
var CrayonSyntaxStrings = {"copy":"\u4f7f\u7528 %s \u590d\u5236\uff0c\u4f7f\u7528 %s \u7c98\u8d34\u3002","minimize":"\u70b9\u51fb\u5c55\u5f00\u4ee3\u7801"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/crayon.min.js'></script>
<link rel='https://api.w.org/' href='http://jspang.com/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://jspang.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://jspang.com/wp-includes/wlwmanifest.xml" /> 
<link rel='prev' title='React免费视频教程-入门和组件' href='http://jspang.com/2017/08/15/react_basic/' />
<link rel='next' title='Webpack3.X版 成神之路 全网首发' href='http://jspang.com/2017/09/16/webpack3-2/' />
<meta name="generator" content="WordPress 4.8.2" />
<link rel="canonical" href="http://jspang.com/2017/09/07/react002/" />
<link rel='shortlink' href='http://jspang.com/?p=2243' />
<link rel="alternate" type="application/json+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F09%2F07%2Freact002%2F" />
<link rel="alternate" type="text/xml+oembed" href="http://jspang.com/wp-json/oembed/1.0/embed?url=http%3A%2F%2Fjspang.com%2F2017%2F09%2F07%2Freact002%2F&#038;format=xml" />
<style type="text/css">div#toc_container ul li {font-size: 80%;}</style>		<style type="text/css" id="wp-custom-css">
			/*
您可以在此处加入您的CSS。

点击上方的帮助图标来了解更多。
*/
#page-links{
    margin: 20px 5px;
	color:#222;
    line-height: 33px;
}
#page-links a{ 
    display: inline-block;
    line-height: 20px;
    padding:3px 10px 3px 10px;
    border:1px solid #ccc;
}
.toc_list li{
  list-style:none;
}		</style>
	
<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?f71290979fed5851ccca7bda346dcdf7";
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();
</script>


</head>

<body class="post-template-default single single-post postid-2243 single-format-standard">


<header class="header">
	<div class="header-top text-center">

					<div class="text-logo">
				<a href="http://jspang.com/">技术胖-胜洪宇关注web前端技术</a>
				<p>前端免费视频第一博客。</p>
			</div><!-- /.text-logo -->
			</div><!-- /.header-top -->

	<nav class="main-menu">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<div id="navigation-wrapper">
						<ul id="menu-%e9%a1%b6%e9%83%a8%e8%8f%9c%e5%8d%95" class="top-menu"><li id="menu-item-1192" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-1192"><a href="http://jspang.com">首页</a></li>
<li id="menu-item-1186" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1186"><a href="http://jspang.com/category/webnote/">前端日记</a></li>
<li id="menu-item-1188" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor menu-item-1188"><a href="http://jspang.com/category/learn/">视频教程</a></li>
<li id="menu-item-1187" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1187"><a href="http://jspang.com/category/python%e9%85%92%e5%90%a7/">Python酒吧</a></li>
<li id="menu-item-1292" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1292"><a href="http://blog.jspang.com">大胖逼逼叨</a></li>
<li id="menu-item-1189" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1189"><a href="http://jspang.com/category/uncategorized/">读书笔记</a></li>
<li id="menu-item-1190" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-1190"><a href="http://jspang.com/category/live/">生活趣事</a></li>
<li id="menu-item-1191" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1191"><a href="http://jspang.com/resume/">自我介绍</a></li>
<li id="menu-item-1291" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1291"><a href="http://jspang.com/navbar/">前端导航</a></li>
</ul>					</div>
					<div class="menu-mobile"></div>
				</div>
			</div>
		</div>
	</nav><!-- /.main-menu -->

</header><!-- /.header -->

<div class="container main-content">
	<div class="row">
		<div class="col-md-8">
			
				<article id="post-2243" class="post-2243 post type-post status-publish format-standard has-post-thumbnail hentry category-react">
            <!--
        <div class="thumbnails">
            <img width="361" height="222" src="style/images/react02.jpg" class="post-thumbnail img-responsive wp-post-image" alt="" srcset="http://jspang.com/wp-content/uploads/2017/09/react02.jpg 361w, http://jspang.com/wp-content/uploads/2017/09/react02-300x184.jpg 300w" sizes="(max-width: 361px) 100vw, 361px" />        </div>
        -->
    
    <div class="padding-content">
        <header class="entry-header">
            <h2 class="entry-title">React免费视频教程-表单的应用</h2>        </header> <!--/.entry-header -->
        
                <div class="entry-meta">
            		<ul class="list-inline">
			<li>
                <span class="author vcard">
                    By <a class="url fn n" href="http://jspang.com/author/jspang001/">技术胖</a>                </span>
			</li>

			<li>/</li>

			<li>
				<span class="posted-on"><time class="entry-date published" datetime="2017-09-07T16:13:54+00:00">2017年9月7日</time><time class="updated hidden" datetime="2017-10-21T23:11:52+00:00">2017年10月21日</time></span>
			</li>
		</ul>
		        </div><!-- .entry-meta -->
                        <div class="entry-content">
            <div id="toc_container" class="toc_wrap_right have_bullets"><p class="toc_title">目录</p><ul class="toc_list"><li><a href="#1bind">第1节：表单的事件响应和bind复用</a></li><li><a href="#2reactname">第2节：React表单name复用</a></li><li><a href="#3react">第3节：React表单-可控组件</a></li><li><a href="#4react">第4节：React表单-不可控组件</a></li></ul></div>
<p>在前端与用户发生最多的交互行为都产生在表单里，在React中表单组件不同于其他组件，因为它们会缓存用户的录入信息和录入状态，由此也带来了React对表单处理的一些特殊性。你是不是经常会在学习或者React中对于使用表单有所疑惑，有很多小伙伴会陷入表单的坑中，并走不出来。技术胖专门写一篇文章来讲述React中表单的使用。</p>
<p>在学习这节课之前，你必须学习我的上一套课程<a href="http://jspang.com/2017/08/15/react_basic/">《React入门与组件》 。</a></p>
<h1><span id="1bind">第1节：表单的事件响应和bind复用</span></h1>
<p>&nbsp;</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=f0547xaf9nj&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>事件响应</h3>
<p>表单组件可以通过设置onChange()回调函数来监听组件变化。当用户的交互行文导致一下变化时，onChange()被执行并通过浏览器做出响应。</p>
<ul>
<li>&lt;input&gt;或&lt;textarea&gt;的value发生变化。</li>
<li>&lt;input&gt;的checked状态改变。</li>
<li>&lt;option&gt;的selected 状态改变。</li>
</ul>
<h3>bind复用</h3>
<p>bind方法为事件相应函数增加一个参数，事件响应函数通过该参数识别事件源。</p>
<p>&nbsp;</p>
<p>我们作一个文本框，并使用bind进行复用，我希望你自己可以亲自动手敲一下代码，加深对bind复用的理解。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a27d3374189649" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
       var  MyForm = React.createClass({
           getInitialState:function(){
            return{
                username:'',
                gender:'man',
                checked:true
            }
           },
           handleChange:function(name,event){
                var newState={};
                newState[name]=name=="checked"?event.target.checked:event.target.value;
                this.setState(newState);
                console.log(newState);
           },
           submitHandler:function(e){
               e.preventDefault();
               var is = this.state.checked?'是':'不是';
               var gender= this.state.gender == "man" ? "帅哥":"美女";
               alert(this.state.username+ is + gender +'.' );
           },
           render:function(){
               return (&lt;form onSubmit={this.submitHandler}&gt;
               &lt;label htmlFor="username"&gt;情输入您的姓名：&lt;/label&gt;
               &lt;input type="text" name="username" onChange={this.handleChange.bind(this,"username")} value={this.state.username} id="username" /&gt;
               &lt;br/&gt;
               &lt;label htmlFor="checkbox"&gt;是或否：&lt;/label&gt;
               &lt;input  type="checkbox" value="是否" name="checked" id="checkbox" onChange={this.handleChange.bind(this,"checked")} checked={this.state.checked} /&gt;
               &lt;br/&gt;
               &lt;label htmlFor="username"&gt;请选择&lt;/label&gt;
               &lt;select name="gender" onChange={this.handleChange.bind(this,"gender")} value={this.state.gender}&gt;
                    &lt;option value="man"&gt;帅哥&lt;/option&gt;
                    &lt;option value="woman"&gt;美女&lt;/option&gt;
               &lt;/select&gt;
               &lt;br/&gt;
               &lt;button type="submit"&gt;提交&lt;/button&gt;
               &lt;/form&gt;)
           }
       });


       ReactDOM.render(&lt;MyForm/&gt;,document.getElementById('demo'))

    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-2">2</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-4">4</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-6">6</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-8">8</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-10">10</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-12">12</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-14">14</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-16">16</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-18">18</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-20">20</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-22">22</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-24">24</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-26">26</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-28">28</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-30">30</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-32">32</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-34">34</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-36">36</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-38">38</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-40">40</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-42">42</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-44">44</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-46">46</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-48">48</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-50">50</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-52">52</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-53">53</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-54">54</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-55">55</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-56">56</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-57">57</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-58">58</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-59">59</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-60">60</div><div class="crayon-num" data-line="crayon-59f71478a27d3374189649-61">61</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27d3374189649-62">62</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a27d3374189649-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">MyForm</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">getInitialState</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">username</span><span class="crayon-o">:</span><span class="crayon-s">''</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">gender</span><span class="crayon-o">:</span><span class="crayon-s">'man'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">checked</span><span class="crayon-o">:</span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">handleChange</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-r">name</span><span class="crayon-sy">,</span><span class="crayon-v">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">newState</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">newState</span><span class="crayon-sy">[</span><span class="crayon-r">name</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-r">name</span><span class="crayon-o">==</span><span class="crayon-s">"checked"</span><span class="crayon-sy">?</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-o">:</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-v">newState</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">newState</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">submitHandler</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">e</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">e</span><span class="crayon-sy">.</span><span class="crayon-e">preventDefault</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-st">is</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-sy">?</span><span class="crayon-s">'是'</span><span class="crayon-o">:</span><span class="crayon-s">'不是'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">gender</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">gender</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-s">"man"</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">"帅哥"</span><span class="crayon-o">:</span><span class="crayon-s">"美女"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">username</span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-st">is</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">gender</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-s">'.'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-e">form </span><span class="crayon-r">onSubmit</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">submitHandler</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-39"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">label </span><span class="crayon-e ">htmlFor</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-o">&gt;</span>情输入您的姓名：<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">.</span><span class="crayon-e">bind</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">,</span><span class="crayon-s">"username"</span><span class="crayon-sy">)</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">username</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">label </span><span class="crayon-e ">htmlFor</span><span class="crayon-o">=</span><span class="crayon-s">"checkbox"</span><span class="crayon-o">&gt;</span>是或否：<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-43"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">input&nbsp;&nbsp;</span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"checkbox"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"是否"</span><span class="crayon-h"> </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"checked"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s">"checkbox"</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">.</span><span class="crayon-e">bind</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">,</span><span class="crayon-s">"checked"</span><span class="crayon-sy">)</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">checked</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-44"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-45"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">label </span><span class="crayon-e ">htmlFor</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-o">&gt;</span>请选择<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-46"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">select </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"gender"</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">.</span><span class="crayon-e">bind</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">,</span><span class="crayon-s">"gender"</span><span class="crayon-sy">)</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">gender</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-47"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">option </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"man"</span><span class="crayon-o">&gt;</span>帅哥<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">option</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-48"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">option </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"woman"</span><span class="crayon-o">&gt;</span>美女<span class="crayon-o">&lt;</span><span class="crayon-c ">/option&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-49"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/s</span><span class="crayon-v">elect</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-50"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-51"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">button </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"submit"</span><span class="crayon-o">&gt;</span>提交<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-52"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">form</span><span class="crayon-o">&gt;</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-53"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-54"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-55">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-56">&nbsp;</div><div class="crayon-line" id="crayon-59f71478a27d3374189649-57"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-v">MyForm</span><span class="crayon-c ">/&gt;,document.getElementById('demo'))</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-58">&nbsp;</div><div class="crayon-line" id="crayon-59f71478a27d3374189649-59"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-60"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27d3374189649-61">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27d3374189649-62"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0185 seconds] -->
<p>上边的代码精髓就在handleChange里边，所以一定要注意里边的写法，因为在React中这非常常用。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a27e6313048518" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 handleChange:function(name,event){
                var newState={};
                newState[name]=name=="checked"?event.target.checked:event.target.value;
                this.setState(newState);
                console.log(newState);
           },</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a27e6313048518-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27e6313048518-2">2</div><div class="crayon-num" data-line="crayon-59f71478a27e6313048518-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27e6313048518-4">4</div><div class="crayon-num" data-line="crayon-59f71478a27e6313048518-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27e6313048518-6">6</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a27e6313048518-1"><span class="crayon-h"> </span><span class="crayon-v">handleChange</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">name</span><span class="crayon-sy">,</span><span class="crayon-v">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27e6313048518-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">newState</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27e6313048518-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">newState</span><span class="crayon-sy">[</span><span class="crayon-v">name</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-v">name</span><span class="crayon-o">==</span><span class="crayon-s">"checked"</span><span class="crayon-sy">?</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-o">:</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27e6313048518-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-v">newState</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27e6313048518-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">newState</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27e6313048518-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0021 seconds] -->
<p>另外需要注意的是在&lt;label&gt;标签里的for不能在正常使用了，而是要写成htmlFor。</p>
<h1><span id="2reactname">第2节：React表单name复用</span></h1>
<blockquote><p>name复用方式直接读取表单的属性值，比bind写法少一个参数（React中事件响应函数会自动绑定this）。其原理是在所有的标签中设置统一的name属性，并将这个属性值对应为state属性，在事件响应函数中通过读取表单的name值获得state属性，从event.target.value获取用户输入的值（check控件稍有不同），要求所有相关的标签（包括input标签）都要统一设置name属性。&#8211;引用《React前端技术与工程实践》</p></blockquote>
<p>也许你会对上边的话不理解，其实这种方法看起来更简单，就是每个标签加一个name，然后判断name来进行state的更改。但是我不建议这样使用，因为为每个标签增加一个name属性值并不友好。下面我们修改昨天的代码把bind复用形式改为name复用形式。</p>
<p>&nbsp;</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=u0548sppiw8&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>其实改的就几个点：改变handleChange的方法，然后改变触发方法，直接写成this.handleChange。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a27f1077095701" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
       var  MyForm = React.createClass({
           getInitialState:function(){
            return{
                username:'',
                gender:'man',
                checked:true
            }
           },
           handleChange:function(event){
                var newState={};
                newState[event.target.name]=event.target.name=="checked"?event.target.checked:event.target.value;
                this.setState(newState);
                console.log(newState);
           },
           submitHandler:function(){
               e.preventDefault();
               var is = this.state.checked?'是':'不是';
               var gender= this.state.gender == "man" ? "帅哥":"美女";
               alert(this.state.username+ is + gender +'.' );
           },
           render:function(){
               return (&lt;form onSubmit={this.submitHandler}&gt;
               &lt;label htmlFor="username"&gt;情输入您的姓名：&lt;/label&gt;
               &lt;input type="text" name="username" onChange={this.handleChange} value={this.state.username} id="username" /&gt;
               &lt;br/&gt;
               &lt;label htmlFor="checkbox"&gt;是或否：&lt;/label&gt;
               &lt;input  type="checkbox" value="是否" name="checked" id="checkbox" onChange={this.handleChange} checked={this.state.checked} /&gt;
               &lt;br/&gt;
               &lt;label htmlFor="username"&gt;请选择&lt;/label&gt;
               &lt;select name="gender" onChange={this.handleChange} value={this.state.gender}&gt;
                    &lt;option value="man"&gt;帅哥&lt;/option&gt;
                    &lt;option value="woman"&gt;美女&lt;/option&gt;
               &lt;/select&gt;
               &lt;br/&gt;
               &lt;button type="submit"&gt;提交&lt;/button&gt;
               &lt;/form&gt;)
           }
       });


       ReactDOM.render(&lt;MyForm/&gt;,document.getElementById('demo'))

    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-2">2</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-4">4</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-6">6</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-8">8</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-10">10</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-12">12</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-14">14</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-16">16</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-18">18</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-20">20</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-22">22</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-24">24</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-26">26</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-28">28</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-30">30</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-32">32</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-34">34</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-36">36</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-38">38</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-40">40</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-41">41</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-42">42</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-43">43</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-44">44</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-45">45</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-46">46</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-47">47</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-48">48</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-49">49</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-50">50</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-51">51</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-52">52</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-53">53</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-54">54</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-55">55</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-56">56</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-57">57</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-58">58</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-59">59</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-60">60</div><div class="crayon-num" data-line="crayon-59f71478a27f1077095701-61">61</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27f1077095701-62">62</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a27f1077095701-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">MyForm</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">getInitialState</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">username</span><span class="crayon-o">:</span><span class="crayon-s">''</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">gender</span><span class="crayon-o">:</span><span class="crayon-s">'man'</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">checked</span><span class="crayon-o">:</span><span class="crayon-t">true</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">handleChange</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">newState</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-sy">}</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">newState</span><span class="crayon-sy">[</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-sy">]</span><span class="crayon-o">=</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">name</span><span class="crayon-o">==</span><span class="crayon-s">"checked"</span><span class="crayon-sy">?</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-o">:</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-v">newState</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">newState</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">submitHandler</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">e</span><span class="crayon-sy">.</span><span class="crayon-e">preventDefault</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-33"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-st">is</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-sy">?</span><span class="crayon-s">'是'</span><span class="crayon-o">:</span><span class="crayon-s">'不是'</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-34"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">gender</span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">gender</span><span class="crayon-h"> </span><span class="crayon-o">==</span><span class="crayon-h"> </span><span class="crayon-s">"man"</span><span class="crayon-h"> </span><span class="crayon-sy">?</span><span class="crayon-h"> </span><span class="crayon-s">"帅哥"</span><span class="crayon-o">:</span><span class="crayon-s">"美女"</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-r">alert</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">username</span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-st">is</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-h"> </span><span class="crayon-v">gender</span><span class="crayon-h"> </span><span class="crayon-o">+</span><span class="crayon-s">'.'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-36"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-37"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-38"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-e">form </span><span class="crayon-r">onSubmit</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">submitHandler</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-39"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">label </span><span class="crayon-e ">htmlFor</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-o">&gt;</span>情输入您的姓名：<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-40"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">username</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-41"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-42"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">label </span><span class="crayon-e ">htmlFor</span><span class="crayon-o">=</span><span class="crayon-s">"checkbox"</span><span class="crayon-o">&gt;</span>是或否：<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-43"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">input&nbsp;&nbsp;</span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"checkbox"</span><span class="crayon-h"> </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"是否"</span><span class="crayon-h"> </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"checked"</span><span class="crayon-h"> </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s">"checkbox"</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">checked</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">checked</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-44"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-45"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">label </span><span class="crayon-e ">htmlFor</span><span class="crayon-o">=</span><span class="crayon-s">"username"</span><span class="crayon-o">&gt;</span>请选择<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">label</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-46"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">select </span><span class="crayon-r">name</span><span class="crayon-o">=</span><span class="crayon-s">"gender"</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">gender</span><span class="crayon-sy">}</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-47"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">option </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"man"</span><span class="crayon-o">&gt;</span>帅哥<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">option</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-48"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">option </span><span class="crayon-e ">value</span><span class="crayon-o">=</span><span class="crayon-s">"woman"</span><span class="crayon-o">&gt;</span>美女<span class="crayon-o">&lt;</span><span class="crayon-c ">/option&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-49"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/s</span><span class="crayon-v">elect</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-50"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-v">br</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-51"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-e">button </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"submit"</span><span class="crayon-o">&gt;</span>提交<span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">button</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-52"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">form</span><span class="crayon-o">&gt;</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-53"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-54"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-55">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-56">&nbsp;</div><div class="crayon-line" id="crayon-59f71478a27f1077095701-57"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-v">MyForm</span><span class="crayon-c ">/&gt;,document.getElementById('demo'))</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-58">&nbsp;</div><div class="crayon-line" id="crayon-59f71478a27f1077095701-59"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-60"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27f1077095701-61">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27f1077095701-62"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0140 seconds] -->
<p>通过两节课的学习，我们可以了解两种表单的操作方式，这两种方式尽量掌握，个人感觉第一种在项目中用的多一些。</p>
<h1><span id="3react">第3节：React表单-可控组件</span></h1>
<h3>可控组件和不可控组件：</h3>
<p>在React中的input标签是有些小坑的，input本身就有自己的缓存机制，然后React的State也有缓存机制。这两种缓存机制我们在编码中是要进行取舍的。将input中的value绑定到state的React组件就是可控组件，反之则是不可控组件。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=h0548yqk6uo&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<h3>可控组件：</h3>
<p>在render()函数中设置了value的&lt;input&gt;是一个功能受限的组件，渲染出来的HTML元素始终保持value属性的值，即使用户输入也不会改变。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a27fc649261438" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var  MyForm = React.createClass({
    render:function(){
        return(
            &lt;div&gt;
            &lt;input type="text" value="jspang" /&gt;
            &lt;/div&gt;
        )
    }
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a27fc649261438-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27fc649261438-2">2</div><div class="crayon-num" data-line="crayon-59f71478a27fc649261438-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27fc649261438-4">4</div><div class="crayon-num" data-line="crayon-59f71478a27fc649261438-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27fc649261438-6">6</div><div class="crayon-num" data-line="crayon-59f71478a27fc649261438-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a27fc649261438-8">8</div><div class="crayon-num" data-line="crayon-59f71478a27fc649261438-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a27fc649261438-1"><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">MyForm</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27fc649261438-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a27fc649261438-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27fc649261438-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27fc649261438-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-s">"jspang"</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27fc649261438-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a27fc649261438-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a27fc649261438-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f71478a27fc649261438-9"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0016 seconds] -->
<p>这时候你在浏览器中打开的Jspang的值是不可变的，甚至连删除都删除不了，这是由React的渲染策略决定的。如果要写成功能正常和可用性组件，我们需要编写onChange事件，并将value绑定到state中。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a2804929680956" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;

&lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;React-props&lt;/title&gt;
    &lt;script src="./common/react.js"&gt;&lt;/script&gt;
    &lt;script src="./common/react-dom.js"&gt;&lt;/script&gt;
    &lt;script src="http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
    &lt;div id="demo"&gt;&lt;/div&gt;
    &lt;script type="text/babel"&gt;
        var  MyForm = React.createClass({
            getInitialState:function(){
                return {value:'jspang'}
            },
            handleChange:function(event){
                this.setState({value:event.target.value});
                console.log(this.state.value)
            },
            render:function(){
                return(
                    &lt;div&gt;
                    &lt;input type="text" value={this.state.value} onChange={this.handleChange} /&gt;
                    &lt;/div&gt;
                )
            }
        });


       ReactDOM.render(&lt;MyForm/&gt;,document.getElementById('demo'))

    &lt;/script&gt;
&lt;/body&gt;

&lt;/html&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a2804929680956-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-2">2</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-4">4</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-6">6</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-8">8</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-10">10</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-12">12</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-13">13</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-14">14</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-15">15</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-16">16</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-17">17</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-18">18</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-19">19</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-20">20</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-21">21</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-22">22</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-23">23</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-24">24</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-25">25</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-26">26</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-27">27</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-28">28</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-29">29</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-30">30</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-31">31</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-32">32</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-33">33</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-34">34</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-35">35</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-36">36</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-37">37</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-38">38</div><div class="crayon-num" data-line="crayon-59f71478a2804929680956-39">39</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2804929680956-40">40</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a2804929680956-1"><span class="crayon-n">&lt;!DOCTYPE html&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-2"><span class="crayon-r ">&lt;html </span><span class="crayon-e ">lang</span><span class="crayon-o">=</span><span class="crayon-s ">"en"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-3">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-4"><span class="crayon-r ">&lt;head&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-5"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">charset</span><span class="crayon-o">=</span><span class="crayon-s ">"UTF-8"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-6"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">name</span><span class="crayon-o">=</span><span class="crayon-s ">"viewport"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"width=device-width, initial-scale=1.0"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-7"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;meta </span><span class="crayon-e ">http-equiv</span><span class="crayon-o">=</span><span class="crayon-s ">"X-UA-Compatible"</span><span class="crayon-h"> </span><span class="crayon-e ">content</span><span class="crayon-o">=</span><span class="crayon-s ">"ie=edge"</span><span class="crayon-r ">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-8"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;title&gt;</span><span class="crayon-i ">React-props</span><span class="crayon-r ">&lt;/title&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-9"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-10"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"./common/react-dom.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-11"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">src</span><span class="crayon-o">=</span><span class="crayon-s">"http://cdn.bootcss.com/babel-core/5.8.38/browser.min.js"</span><span class="crayon-o">&gt;</span><span class="crayon-ta">&lt;/script&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-12"><span class="crayon-r ">&lt;/head&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-13">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-14"><span class="crayon-r ">&lt;body&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-15"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r ">&lt;div </span><span class="crayon-e ">id</span><span class="crayon-o">=</span><span class="crayon-s ">"demo"</span><span class="crayon-r ">&gt;</span><span class="crayon-r ">&lt;/div&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-16"><span class="crayon-i ">&nbsp;&nbsp;&nbsp;&nbsp;<span class="crayon-ta">&lt;script </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text/babel"</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-17"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">MyForm</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-18"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">getInitialState</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-19"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">{</span><span class="crayon-v">value</span><span class="crayon-o">:</span><span class="crayon-s">'jspang'</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-20"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-21"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">handleChange</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-v">event</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-22"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-e">setState</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span><span class="crayon-v">value</span><span class="crayon-o">:</span><span class="crayon-v">event</span><span class="crayon-sy">.</span><span class="crayon-v">target</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-23"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-24"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-25"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-26"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-27"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-28"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-e ">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-v">value</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">state</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-r">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-29"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-30"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-31"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-32"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-33">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-34">&nbsp;</div><div class="crayon-line" id="crayon-59f71478a2804929680956-35"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">render</span><span class="crayon-sy">(</span><span class="crayon-o">&lt;</span><span class="crayon-v">MyForm</span><span class="crayon-c ">/&gt;,document.getElementById('demo'))</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-36">&nbsp;</div><div class="crayon-line" id="crayon-59f71478a2804929680956-37"><span class="crayon-c ">&nbsp;&nbsp;&nbsp;&nbsp;&lt;/s</span><span class="crayon-v">cript</span><span class="crayon-o">&gt;</span></span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-38"><span class="crayon-r ">&lt;/body&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2804929680956-39">&nbsp;</div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2804929680956-40"><span class="crayon-r ">&lt;/html&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0062 seconds] -->
<p>在情况允许的条件下，我们应该优先考虑编写可控组件。</p>
<p>可控组件的有点：</p>
<ul>
<li>符合React单向数据流特性，即从state流向render输出的结果。</li>
<li>数据存储在state中，便于访问和处理。</li>
</ul>
<h1><span id="4react">第4节：React表单-不可控组件</span></h1>
<p>在input标签中不把value绑定到state上的就是不可控组件，它的数据不合state对应，所以在开发时会给自己挖很多坑，但是不可控组件并不是不可掌控，就用一节课的时间，我们了解一下不可控组件的小技巧。</p>
<div class="smartideo">
<div class="player">
                    <iframe src="//v.qq.com/iframe/player.html?vid=j0548v121jo&#038;auto=0" width="100%" height="100%" frameborder="0" allowfullscreen="true"></iframe>
                </div>
</div>
<p>我们先来做一个最简单的不可用组件。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a280c009089460" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var  MyForm = React.createClass({
    render:function(){
        return(
            &lt;div&gt;
                &lt;input type="text"/&gt;
            &lt;/div&gt;
        )
    }
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a280c009089460-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a280c009089460-2">2</div><div class="crayon-num" data-line="crayon-59f71478a280c009089460-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a280c009089460-4">4</div><div class="crayon-num" data-line="crayon-59f71478a280c009089460-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a280c009089460-6">6</div><div class="crayon-num" data-line="crayon-59f71478a280c009089460-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a280c009089460-8">8</div><div class="crayon-num" data-line="crayon-59f71478a280c009089460-9">9</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a280c009089460-1"><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">MyForm</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a280c009089460-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a280c009089460-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a280c009089460-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a280c009089460-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a280c009089460-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a280c009089460-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a280c009089460-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f71478a280c009089460-9"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0015 seconds] -->
<p>组件完成之后给它加上一个onChange事件，发现是可以监控到变化值的。如果要获得iput中的value值，需先拿到其DOM节点，然后获取其value值。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a2814655847019" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
var  MyForm = React.createClass({
    handleChange:function(){
        var inputValue=ReactDOM.findDOMNode(this.refs.jspang).value;
        console.log(inputValue);
    },
    render:function(){
        return(
            &lt;div&gt;
                &lt;input type="text" onChange={this.handleChange} ref="jspang"/&gt;
            &lt;/div&gt;
        )
    }
});</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a2814655847019-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2814655847019-2">2</div><div class="crayon-num" data-line="crayon-59f71478a2814655847019-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2814655847019-4">4</div><div class="crayon-num" data-line="crayon-59f71478a2814655847019-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2814655847019-6">6</div><div class="crayon-num" data-line="crayon-59f71478a2814655847019-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2814655847019-8">8</div><div class="crayon-num" data-line="crayon-59f71478a2814655847019-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2814655847019-10">10</div><div class="crayon-num" data-line="crayon-59f71478a2814655847019-11">11</div><div class="crayon-num crayon-striped-num" data-line="crayon-59f71478a2814655847019-12">12</div><div class="crayon-num" data-line="crayon-59f71478a2814655847019-13">13</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a2814655847019-1"><span class="crayon-t">var</span><span class="crayon-h">&nbsp;&nbsp;</span><span class="crayon-v">MyForm</span><span class="crayon-h"> </span><span class="crayon-o">=</span><span class="crayon-h"> </span><span class="crayon-v">React</span><span class="crayon-sy">.</span><span class="crayon-e">createClass</span><span class="crayon-sy">(</span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2814655847019-2"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">handleChange</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a2814655847019-3"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-t">var</span><span class="crayon-h"> </span><span class="crayon-v">inputValue</span><span class="crayon-o">=</span><span class="crayon-v">ReactDOM</span><span class="crayon-sy">.</span><span class="crayon-e">findDOMNode</span><span class="crayon-sy">(</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">refs</span><span class="crayon-sy">.</span><span class="crayon-v">jspang</span><span class="crayon-sy">)</span><span class="crayon-sy">.</span><span class="crayon-v">value</span><span class="crayon-sy">;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2814655847019-4"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">console</span><span class="crayon-sy">.</span><span class="crayon-e">log</span><span class="crayon-sy">(</span><span class="crayon-v">inputValue</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div><div class="crayon-line" id="crayon-59f71478a2814655847019-5"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span><span class="crayon-sy">,</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2814655847019-6"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-v">render</span><span class="crayon-o">:</span><span class="crayon-t">function</span><span class="crayon-sy">(</span><span class="crayon-sy">)</span><span class="crayon-sy">{</span></div><div class="crayon-line" id="crayon-59f71478a2814655847019-7"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-st">return</span><span class="crayon-sy">(</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2814655847019-8"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2814655847019-9"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-v">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">ref</span><span class="crayon-o">=</span><span class="crayon-s">"jspang"</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2814655847019-10"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-o">&lt;</span><span class="crayon-o">/</span><span class="crayon-v">div</span><span class="crayon-o">&gt;</span></div><div class="crayon-line" id="crayon-59f71478a2814655847019-11"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-59f71478a2814655847019-12"><span class="crayon-h">&nbsp;&nbsp;&nbsp;&nbsp;</span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-59f71478a2814655847019-13"><span class="crayon-sy">}</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0027 seconds] -->
<p>当然我们也可以给input加入默认值，但是不是value了，而是defaultValue。</p><!-- Crayon Syntax Highlighter v_2.7.2_beta -->

		<div id="crayon-59f71478a2819735253064" class="crayon-syntax crayon-theme-github crayon-font-droid-sans-mono crayon-os-pc print-yes notranslate" data-settings=" minimize scroll-mouseover" style=" margin-top: 12px; margin-bottom: 12px; font-size: 12px !important; line-height: 15px !important;">
		
			<div class="crayon-plain-wrap"><textarea wrap="soft" class="crayon-plain print-no" data-settings="dblclick" readonly style="-moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4; font-size: 12px !important; line-height: 15px !important;">
 &lt;input type="text" onChange={this.handleChange} ref="jspang" defaultValue='jspang'/&gt;</textarea></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-59f71478a2819735253064-1">1</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-59f71478a2819735253064-1"><span class="crayon-h"> </span><span class="crayon-o">&lt;</span><span class="crayon-e">input </span><span class="crayon-v">type</span><span class="crayon-o">=</span><span class="crayon-s">"text"</span><span class="crayon-h"> </span><span class="crayon-v">onChange</span><span class="crayon-o">=</span><span class="crayon-sy">{</span><span class="crayon-r">this</span><span class="crayon-sy">.</span><span class="crayon-v">handleChange</span><span class="crayon-sy">}</span><span class="crayon-h"> </span><span class="crayon-v">ref</span><span class="crayon-o">=</span><span class="crayon-s">"jspang"</span><span class="crayon-h"> </span><span class="crayon-v">defaultValue</span><span class="crayon-o">=</span><span class="crayon-s">'jspang'</span><span class="crayon-o">/</span><span class="crayon-o">&gt;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0008 seconds] -->
<p>&nbsp;</p>
        <div class="gave" >
            <a href="javascript:;" id="gave">打赏</a>
            <div class="code" id="wechatCode" style="display: none">
                <img src="style/images/20170518151055111.png" alt="微信扫一扫支付">
                <div><img src="style/images/ico-wechat.jpg" alt="微信logo" class="ico-wechat">微信扫一扫，打赏作者吧～</i></div>
            </div>
        </div>        </div> <!-- //.entry-content -->
               <br>
        <div class="entry-tags text-left"></div>
    </div>

</article><!-- #post-## -->                              
				<div class="user-profile media">
    <div class="pull-left author-avater">
        <img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-110.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=220&amp;d=mm&amp;r=g 2x' class='avatar avatar-110 photo' height='110' width='110' />    </div>
    <div class="media-body">
        <div class="profile-heading">
            <h3><a href="http://jspang.com/author/jspang001/" title="由技术胖发布" rel="author">技术胖</a></h3>
        </div>
        <div class="website-link">http://jspang.com</div>
        <div class="author-description">
                    </div>
    </div>
</div><!-- .user-profile -->                               
				
	<nav class="navigation post-navigation" role="navigation">
		<h2 class="screen-reader-text">文章导航</h2>
		<div class="nav-links"><div class="nav-previous"><a href="http://jspang.com/2017/08/15/react_basic/" rel="prev"><i class="fa fa-angle-left"></i> Previous Post</a></div><div class="nav-next"><a href="http://jspang.com/2017/09/16/webpack3-2/" rel="next">Next Post <i class="fa fa-angle-right"></i></a></div></div>
	</nav>
									<div class="comment-box">
						<div id="comments" class="comments-area comments">
            <h3 class="common-title comments-title">
            3 Comments        </h3>

        <ul class="comment-list">

            			<li class="comment even thread-even depth-1" id="li-comment-535">
				<div id="comment-535" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/4ab583d779635e4dd3cb51e1d4a4cf7a-75.jpg' srcset='http://1.gravatar.com/avatar/4ab583d779635e4dd3cb51e1d4a4cf7a?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Ainy</h3>							<span class="comment-date">2017年9月8日</span>
						</div>

						
						<div class="comment-content">
							<p>很是受用，谢谢胖哥，什么时候出react native啊？</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/09/07/react002/?replytocom=535#respond' onclick='return addComment.moveForm( "comment-535", "535", "respond", "2243" )' aria-label='回复给Ainy'>Reply</a>						</span>

					</div>

				</div>
				<ul class="children">
			<li class="comment byuser comment-author-jspang001 bypostauthor odd alt depth-2" id="li-comment-537">
				<div id="comment-537" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/774555ea0f0ea3a59b61748c53c99fba-75.jpg' srcset='http://1.gravatar.com/avatar/774555ea0f0ea3a59b61748c53c99fba?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author"><a href='http://jspang.com' rel='external nofollow' class='url'>技术胖</a></h3>							<span class="comment-date">2017年9月8日</span>
						</div>

						
						<div class="comment-content">
							<p>等全家桶讲完就会讲。</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/09/07/react002/?replytocom=537#respond' onclick='return addComment.moveForm( "comment-537", "537", "respond", "2243" )' aria-label='回复给技术胖'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
</ul><!-- .children -->
</li><!-- #comment-## -->
			<li class="comment even thread-odd thread-alt depth-1" id="li-comment-638">
				<div id="comment-638" class="comment-body media">

					<div class="comment-avartar pull-left">
						<img alt='' src='style/images/722a1736b635ebbee22f908378e82230-75.jpg' srcset='http://1.gravatar.com/avatar/722a1736b635ebbee22f908378e82230?s=150&amp;d=mm&amp;r=g 2x' class='avatar avatar-75 photo' height='75' width='75' />					</div>
					<div class="comment-context media-body">
						<div class="comment-head">
							<h3 class="comment-author">Iven</h3>							<span class="comment-date">2017年9月20日</span>
						</div>

						
						<div class="comment-content">
							<p>胖哥，真心不错！坚持下去！<br />
有个不懂的问题： 在React开发中有人说组件化，样式也写在组件内，那么如果我要遍历一些子元素 (比如 ul 下的 li 元素，悬浮某个元素，改元素颜色变化)，在组件内的话需要我自己根据逻辑遍历，而如果我通过引用样式文件的方式添加样式的话，可以使用伪类，方便快捷，但不符合组件化思想。 还望胖哥给个说法！</p>
						</div>

												<span class="comment-reply">
							<a rel='nofollow' class='comment-reply-link' href='http://jspang.com/2017/09/07/react002/?replytocom=638#respond' onclick='return addComment.moveForm( "comment-638", "638", "respond", "2243" )' aria-label='回复给Iven'>Reply</a>						</span>

					</div>

				</div>
				</li><!-- #comment-## -->
        </ul><!-- .comment-list -->

        
        
    
    	<div id="respond" class="comment-respond">
		<h3 id="reply-title" class="comment-reply-title">发表评论 <small><a rel="nofollow" id="cancel-comment-reply-link" href="/2017/09/07/react002/#respond" style="display:none;">取消回复</a></small></h3>			<form action="http://jspang.com/wp-comments-post.php" method="post" id="commentform" class="comment-form row">
				<div class="clearfix"></div><div class="col-md-12"><textarea id="comment" placeholder="Write your comment..." name="comment" aria-required="true"></textarea></div><div class="col-md-4"><input id="author" name="author" type="text" placeholder="Name *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="email" name="email" type="text" placeholder="Email *" value="" size="30" aria-required='true'/></div>
<div class="col-md-4"><input id="url" name="url" type="text" placeholder="Website" value="" size="30"/></div>
<p class="aiowps-captcha"><label for="aiowps-captcha-answer">请输入数字答案:</label><div class="aiowps-captcha-equation"><strong>10 &#43; 1 = <input type="hidden" name="aiowps-captcha-string-info" id="aiowps-captcha-string-info" value="vqdjme2tgl" /><input type="hidden" name="aiowps-captcha-temp-string" id="aiowps-captcha-temp-string" value="1509364856" /><input type="text" size="2" id="aiowps-captcha-answer" name="aiowps-captcha-answer" value="" autocomplete="off" /></strong></div></p><p class="form-submit col-md-12"><input name="submit" type="submit" id="submit" class="submit" value="Post Comment" /> <input type='hidden' name='comment_post_ID' value='2243' id='comment_post_ID' />
<input type='hidden' name='comment_parent' id='comment_parent' value='0' />
</p><p style="display: none;"><input type="hidden" id="akismet_comment_nonce" name="akismet_comment_nonce" value="aa25dca217" /></p><p style="display: none;"><input type="hidden" id="ak_js" name="ak_js" value="14"/></p>			</form>
			</div><!-- #respond -->
	</div>					</div>
				
			
					</div>

		<div class="col-md-4">
    <div class="primary-sidebar widget-area" role="complementary">
        <aside id="aster_about_base_widget-2" class="widget widget_aster_about_base_widget"><h1 class="widget-title text-uppercase">博主介绍</h1>			
			<div class="about-widget">
			
						
						<div class="about-me-content">技术胖：10年一线互联网程序开发经验（仍在一线奋战），做过J2EE、PHP和前端，现在主要关注前端领域。每年帮助50万以上前端爱好者学习。 除一线程序员外，博主还有以下身份，但只在装逼时使用。 掘金专栏作者，GitChat特邀讲师，纯金UED金牌讲师，CSDN学院知名讲师，百度传课前端讲师。</div>
				
			
			</div>
			
		</aside><aside id="search-2" class="widget widget_search"><form role="search" method="get" id="search-form" action="http://jspang.com/">
    <div class="aster-search-form">
		<input type="text" placeholder="Search and hit enter&hellip;" value="" name="s" id="s" />
	 </div>
</form></aside><aside id="text-2" class="widget widget_text"><h1 class="widget-title text-uppercase">公告</h1>			<div class="textwidget"><div></div>
<div style="color: #f44336; font-weight: blod;">广告事宜请联系：QQ：454275609</p>
<hr />
<p><strong>QQ群1：364140450(满)</strong></p>
</div>
<div style="color: #f44336; font-weight: blod;"><strong>QQ群2：524520566（600人）</strong></div>
<div style="color: #f44336; font-weight: blod;">进群和2000多名前端关注者一起进步，<br />
我每周都会上线解答群内问题。</div>
<hr />
<ul>
<li>《webpack3.x 成神之路》更新完成。</li>
<li>开始更新《React全家桶》教程，每周三节，请小伙伴关注。</li>
<li>在看视频课程中，如果有疑问，可以发邮件给技术胖。邮件地址：web0432@126.com ,技术胖会在下班后给你回复邮件，解决你的问题。</li>
</ul>
</div>
		</aside><aside id="text-6" class="widget widget_text"><h1 class="widget-title text-uppercase">如果文章对您有帮助，请打赏：</h1>			<div class="textwidget"><p>						<style>
				
					#tab_container_1817 {
				overflow:hidden;
				display:block;
				width:100%;
				border:0px solid #ddd;
				margin-bottom:30px;
				}

#tab_container_1817 .tab-content{
		padding:20px;
		border: 1px solid #e6e6e6 !important;
		margin-top: 0px;
		background-color:#ffffff !important;
		color: #000000 !important;
		font-size:16px !important;
		font-family: Open Sans !important;
		
				border: 1px solid #e6e6e6 !important;
		}
#tab_container_1817 .wpsm_nav-tabs {
    border-bottom: 0px solid #ddd;
}
#tab_container_1817 .wpsm_nav-tabs > li.active > a, #tab_container_1817 .wpsm_nav-tabs > li.active > a:hover, #tab_container_1817 .wpsm_nav-tabs > li.active > a:focus {
	color: #000000 !important;
	cursor: default;
	background-color: #ffffff !important;
	border: 1px solid #e6e6e6 !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a {
    margin-right: 0px !important; 
    line-height: 1.42857143 !important;
    border: 1px solid #d50000 !important;
    border-radius: 0px 0px 0 0 !important; 
	background-color: #e80606 !important;
	color: #000000 !important;
	padding: 15px 18px 15px 18px !important;
	text-decoration: none !important;
	font-size: 14px !important;
	text-align:center !important;
	font-family: Open Sans !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:focus {
outline: 0px !important;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:before {
	display:none !important;
}
#tab_container_1817 .wpsm_nav-tabs > li > a:after {
	display:none !important ;
}
#tab_container_1817 .wpsm_nav-tabs > li{
padding:0px !important ;
margin:0px;
}

#tab_container_1817 .wpsm_nav-tabs > li > a:hover , #tab_container_1817 .wpsm_nav-tabs > li > a:focus {
    color: #000000 !important;
    background-color: #e80606 !important;
	border: 1px solid #d50000 !important;
	
}
#tab_container_1817 .wpsm_nav-tabs > li > a .fa{

margin-right:5px !important;

margin-left:5px !important;


}

		#tab_container_1817 .wpsm_nav-tabs a{
			background-image: url(style/images/img/style-noise.png);
			background-position: 0 0;
			background-repeat: repeat-x;
			}
			


#tab_container_1817 .wpsm_nav-tabs > li {
    float: left;
    margin-bottom: -1px !important;
	margin-right:0px !important; 
}


#tab_container_1817 .tab-content{
overflow:hidden !important;
}


@media (min-width: 769px) {

	#tab_container_1817 .wpsm_nav-tabs > li{
	float:left !important ;
		margin-right:-1px !important;
			}
	#tab_container_1817 .wpsm_nav-tabs{
	float:none !important;
	margin:0px !important;
	}

	/* Margin CSS FOR Horizontal */
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}

}



@media (max-width: 768px) {
	#tab_container_1817 .wpsm_nav-tabs > li {
				
	}
	#tab_container_1817 .wpsm_nav{
			}
}


.wpsm_nav-tabs li:before{
display:none !important;
}

@media (max-width: 768px) {
		
		.wpsm_nav-tabs{
		margin-left:0px !important;
		margin-right:0px !important; 
		
	}
		#tab_container_1817 .wpsm_nav-tabs > li{
		float:none !important;
	}
		
	
}
				</style>
				<div id="tab_container_1817" >
	 
					<ul class="wpsm_nav wpsm_nav-tabs" role="tablist" id="myTab_1817">
							
							<li role="presentation"  class="active"  >
								<a href="#tabs_desc_1817_1" aria-controls="tabs_desc_1817_1" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏5元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_2" aria-controls="tabs_desc_1817_2" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏15元</span>
											
																						
																				
										
									
								</a>
							</li>
							
							<li role="presentation"  >
								<a href="#tabs_desc_1817_3" aria-controls="tabs_desc_1817_3" role="tab" data-toggle="tab">
									
																																		
																						
											<span>赏29元</span>
											
																						
																				
										
									
								</a>
							</li>
											 </ul>

					  <!-- Tab panes -->
					  <div class="tab-content" id="tab-content_1817">
												 <div role="tabpanel" class="tab-pane  in active " id="tabs_desc_1817_1">
								<img src="style/images/weixin05.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_2">
								<img src="style/images/weixin15.jpg" width="100%" " class="alignnone size-medium" />						 </div>
												 <div role="tabpanel" class="tab-pane " id="tabs_desc_1817_3">
								<img src="style/images/weixin29.jpg" width="100%" " class="alignnone size-medium" />						 </div>
							
					 </div>
					 
				 </div>
 <script>
		jQuery(function () {
			jQuery('#myTab_1817 a:first').tab('show')
		});
		
				jQuery(function(){
			var b="fadeIn";
			var c;
			var a;
			d(jQuery("#myTab_1817 a"),jQuery("#tab-content_1817"));function d(e,f,g){
				e.click(function(i){
					i.preventDefault();
					jQuery(this).tab("show");
					var h=jQuery(this).data("easein");
					if(c){c.removeClass(a);}
					if(h){f.find("div.active").addClass("animated "+h);a=h;}
					else{if(g){f.find("div.active").addClass("animated "+g);a=g;}else{f.find("div.active").addClass("animated "+b);a=b;}}c=f.find("div.active");
				});
			}
		});
			</script>
				
			<br />
<span style="color: red;">打赏后你将获得以下特权：</span></p>
<p>1.加入技术胖前端微信交流群。<br />
2.收听《前端成神软技能》语音分享版。<br />
3.和10年程序老司机（技术胖）成为微信好友。<br />
4.获得本站前端视频离线高清版。</p>
<hr />
<p><span style="color: red;">打赏后获得特权流程：</span><br />
1.扫二维码添加技术胖私人微信。<br />
<img src="style/images/232323121111111111.jpg" width="50%" /></p>
<p>2.添加微信成功后，发送打赏截图。</p>
<p>3.技术胖拉你入群，查看群公告。</p>
</div>
		</aside><aside id="text-8" class="widget widget_text"><h1 class="widget-title text-uppercase">视频教程</h1>			<div class="textwidget"><p>最新视频</p>
<ol>
<li><a href="http://jspang.com/2017/06/03/es6/" rel="bookmark">技术胖带你玩转ES6视频教程</a></li>
</ol>
<p>Vue视频合集-<small>可按此顺序学习</small></p>
<ol>
<li><a href="http://jspang.com/2017/02/23/vue2_01/" rel="bookmark">【第一季】VUE2.0内部指令(共8集)</a></li>
<li><a href="http://jspang.com/2017/03/14/vue2_02/" rel="bookmark">【第二季】VUE2.0全局API(共9集)</a></li>
<li><a href="http://jspang.com/2017/03/26/vue3/" rel="bookmark">【第三季】VUE2.0选项（共6集）</a></li>
<li><a href="http://jspang.com/2017/04/09/vue2_4/" rel="bookmark">【第四季】VUE2.0实例内置组件（共4集）</a></li>
<li><a href="http://jspang.com/2017/04/10/vue-cli/" rel="bookmark">技术胖的VUE-CLI 视频教程</a></li>
<li><a href="http://jspang.com/2017/04/13/vue-router/" rel="bookmark">技术胖的VUE-ROUTER视频教程</a></li>
<li><a href="http://jspang.com/2017/05/03/vuex/" rel="bookmark">技术胖的VUEX视频教程</a></li>
<li><a href="http://jspang.com/2017/05/22/vuedemo/" rel="bookmark">VUE实战视频-快餐店收银系统</a></li>
</ol>
<hr />
<p>CocosCreator视频（前端游戏制作）</p>
<ol>
<li><a href="http://jspang.com/category/learn/jichu/">CC基础视频教程</a></li>
<li><a href="http://jspang.com/category/learn/shizhan/">CC实战-勇闯地下室</a></li>
</ol>
<hr />
<p>其它视频</p>
<ol>
<li><a href="http://jspang.com/2016/11/24/webpack/">Webpack基础视频</a></li>
<li><a href="http://jspang.com/2017/01/11/fabricjsbasic/" rel="bookmark">步入FABRIC.JS 中文视频教程</a></li>
</ol>
</div>
		</aside><aside id="text-5" class="widget widget_text"><h1 class="widget-title text-uppercase">捐赠墙</h1>			<div class="textwidget">
<hr/>
<div>以下人员在服务器购买费用中捐款，所以本站由以下人员共同建立。2017年5月22日重新上线。</div>
<div style="color:#f44336;border-bottom:1px solid #e0e0e0;padding:10px 0px;" >土豪榜</div>
<div>
高丽-59元，
周老六-147元，
风飞沙-118元
</div>
<div  style="color:#f44336;border-bottom:1px solid #e0e0e0;;padding:10px 0px;">真情铁粉</div>
<div>
婷婷-19元，
fillter-29元，
军哥哥-29元，
贪吃鱼儿-29元，
妖妖-29元，
追风-48元，
吴思超-29元，
金秀学-29元，
十月弓虽-29元，
谭兵-29元，
千夜一夕-29元，
jason-29元，
上帝没给答案-19元，
土豆-19元，
Tempest-29元，
馥镬-29，
詹小云-19元，
hasaki-29元，
落_尘-29元，
汪胜强-29元，
ginway-29元，
吕檀溪-29元，
Arical-29元，
lishalom-29元，
桂玉青-19元，
张杨-19元，
Peach-29元，
国豪-19元，
Kevin-29元，
孟凡兴-29元，
谢启鸿-19元，
bwhite-29元，
null-29元，
yuyi_guo-19元，
张易得-29元，
Rewa-Fang-29元，
小钟-29元，
木白-29元，
jackyrong-19元，
咚咚-29元，
笑容-29元，
vanjon-29元，
一曲琴殇-19元，
橙橙同学-29元，
王畅-19元，
咚咚-29元，
野蛮的橘子-29元，
路道老粗-29元，
建豪-29元

</div>
</div>
		</aside>    </div>
</div>

	</div>
</div>

<footer id="footer">
	<div class="copy-right-text text-center">
		<div class="container">
			<div class="row">
				<div class="col-md-12">
					<p>Copyright &copy; 2017 <a href="http://jspang.com/" rel="home">技术胖-胜洪宇关注web前端技术</a>. All rights reserved.<br>Powered by <a href="http://jspang.com">jspang.com</a>.备案号 <a href="http://icp.chinaz.com/info?q=jspang.com">吉ICP备11005377号-3</a></p>
				</div>
			</div>
		</div>
	</div><!-- /Copyright Text -->
</footer><!-- /#Footer -->


<div class="scroll-up">
    <a href="#"><i class="fa fa-angle-up"></i></a>
</div>
<!-- Scroll Up -->

<link rel='stylesheet' id='wechat-reward-css'  href='style/css/wechat-reward.css' type='text/css' media='all' />
<script type='text/javascript' src='style/js/smartideo.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var tocplus = {"smooth_scroll":"1","visibility_show":"\u663e\u793a","visibility_hide":"\u9690\u85cf","width":"Auto"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/front.min.js'></script>
<script type='text/javascript' src='style/js/bootstrap.js'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var viewsCacheL10n = {"admin_ajax_url":"http:\/\/jspang.com\/wp-admin\/admin-ajax.php","post_id":"2243"};
/* ]]> */
</script>
<script type='text/javascript' src='style/js/postviews-cache.js'></script>
<script type='text/javascript' src='style/js/bootstrap.min.js'></script>
<script type='text/javascript' src='style/js/smoothscroll.js'></script>
<script type='text/javascript' src='style/js/jquery.slicknav.js'></script>
<script type='text/javascript' src='style/js/jquery.fitvids.js'></script>
<script type='text/javascript' src='style/js/imagesloaded.min.js'></script>
<script type='text/javascript' src='style/js/masonry.min.js'></script>
<script type='text/javascript' src='style/js/jquery.masonry.min.js'></script>
<script type='text/javascript' src='style/js/scripts.js'></script>
<script type='text/javascript' src='style/js/comment-reply.min.js'></script>
<script type='text/javascript' src='style/js/wp-embed.min.js'></script>
<script type='text/javascript' src='style/js/wechat-reward.js'></script>
<script type='text/javascript' src='style/js/form.js'></script>
	    <script type="type/html" id="xhshop_payment_gateways_jspai_html">
    	    <div id="xhshop-pay-callback-payment-gateway">
    		<div class="xunhupay open"  onclick="window.XHSHOP.payment_gateway.hide();"></div>
        		<ul class="xunhupay-list" id="xunhupay-list" style="display: none;">
            		<li class="xunhupay-loading" style="border-top:0;display:none;"></li>
            		<li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-alipay-payment');"  class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon.png) center no-repeat;"></i><span>点击付款</span></li><li onclick="window.XHSHOP.payment_gateway.submit('xh-payment-gateway-wechat-payment');" style="border-bottom:0" class="xunhupay-btn channel-ali"><i style="width:50px;height:40px;background: url(style/images/img/icon01.png) center no-repeat;"></i><span>点击付款</span></li>            		<li class="xunhupay-close" onclick="window.XHSHOP.payment_gateway.hide();"></li>
        		</ul>
    		</div>
		</script>
				<script type="text/javascript">
		(function($){
			if(!window.XHSHOP){window.XHSHOP={};}
			window.XHSHOP.url_ajax ='http://jspang.com/wp-admin/admin-ajax.php';
			window.XHSHOP.alert=function(msg){alert(msg);};
			window.XHSHOP.beforeSend=function(){$('.xunhupay-loading').css('display','block');};
			window.XHSHOP.complete=function(){};
			window.XHSHOP.error=function(e){window.XHSHOP.alert("系统异常，请稍候重试！");};
			window.XHSHOP.finish=function(){$('.xunhupay-loading').css('display','none');};
			window.XHSHOP.unauth =function(callback){(function(){location.href="/wp-login.php?redirect_to="+encodeURIComponent(location.href.toString());})();};
	
			window.XHSHOP.pay=function(data){
							    window.XHSHOP.payment_gateway.show(data);
			    			};
			
			window.XHSHOP.payment_gateway={
					__data:null,
					__beforeSends:[window.XHSHOP.beforeSend],
					__completes:[window.XHSHOP.complete],
					__finishs:[window.XHSHOP.finish],
					show:function(data){
						window.XHSHOP.payment_gateway.__data=data;
						window.XHSHOP.payment_gateways_templete=$('#xhshop_payment_gateways_jspai_html').html();
						
												
						window.XHSHOP.payment_gateway.hide();
				 		$('body').append(window.XHSHOP.payment_gateways_templete);
				 		$('#xunhupay-list').fadeIn();
				 		window.XHSHOP.payment_gateway.__resize();
				 		
				 							},
					__resize : function(){
			 			if(document.documentElement.clientWidth<=450){
			 				return;
			 			}
						var d = document.getElementById('xunhupay-list');
						if(d==null){return;}
						d.style.top = ((document.documentElement.clientHeight - d.offsetHeight) / 2) + "px";
						d.style.left = ((document.documentElement.clientWidth - d.offsetWidth) / 2) + "px";
			 		},
					hide:function(){
												var $gateway =$('#xhshop-pay-callback-payment-gateway');
						if($gateway.length>0){
							$gateway.remove();
						}
											},
					submit:function(payment_gateway_id){
						var data =window.XHSHOP.payment_gateway.__data;
						if(!data){data={};}
						data.action='XHSHOP_SHIPPINGS_SIMPLE_PAY';
						data.callback='?';
						data.call_url=encodeURIComponent(location.href.toString());
						data.payment_gateway=payment_gateway_id;
						$.ajax({
							url:window.XHSHOP.url_ajax,
							type:'post',
							timeout:60*1000,
							async:true,
							cache:false,
							data:data,
							traditional:false,
							dataType: "jsonp",
							jsonp: "callback", 
							beforeSend:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__beforeSends.length;i++){
									window.XHSHOP.payment_gateway.__beforeSends[i]();
								}
							},
							complete:function(){
								for(var i=0;i<window.XHSHOP.payment_gateway.__completes.length;i++){
									window.XHSHOP.payment_gateway.__completes[i]();
								}
							},
							success:function(call){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								if(!call){
									return;
								}
								
								if(call.errcode!=0){
									if(call.errcode==501){
										window.XHSHOP.unauth();
										return;
									}
									
																		window.XHSHOP.payment_gateway.hide();
									window.XHSHOP.alert('errcode:'+call.errcode+';errmsg:'+call.errmsg);
									return;
								}
								
																$('body').append('<div style="display:none;">'+call.errmsg+'</div>');
							},
							error:function(e){
								for(var i=0;i<window.XHSHOP.payment_gateway.__finishs.length;i++){
									window.XHSHOP.payment_gateway.__finishs[i]();
								}
								console.warn(e.responseText);
								window.XHSHOP.error(e);
								window.XHSHOP.payment_gateway.hide();
							}
						});
					}
    			};
    		})(jQuery);
		</script>
	    
</body>
</html>

<!-- Dynamic page generated in 1.025 seconds. -->
<!-- Cached page generated by WP-Super-Cache on 2017-10-30 20:00:57 -->

<!-- Compression = gzip -->